The @riapacheco/yutes package is a (really really) lightweight (and agnostic) SCSS pack intended to provide utilities similar to those found in common frameworks like Bootstrap, but without the rigidness that limits fluid design.
These utilities are made possible by Sass features like @each & @for, and through intentional design of classes, like the time-intensive flexbox classes.

This package expedites your workflow with:
mr-2 for margin-right: 2rem;)width/height behaviors that prohibit consistency/yutes/colors.scss)border-radius and responsive sizing
To install from NPM
$ npm install @riapacheco/yutes
In your main SCSS file, add:
@import '~@riapacheco/yutes/yutes.scss'; @import '~@riapacheco/yutes/colors.scss';
| File | Features | Usage Example Links |
|---|---|---|
| yutes.scss | 👉 Imports for all helper stylesheets 👉 Overrides for all browser/webkit default styles from browser: Unsets button, unsets input, fixes img weird sizing, removes scrollbar, removes active styles for anchors [a], removes padding/margin on <small> elements, removes styles on select and textarea, removes margin/padding from <nav> element |
none |
| utilities.scss | 👉 Dynamic padding and margin classes 👉 Optional containers: (e.g. .container-sm, .container) for centered narrow content 👉 Flexbox classes for in-template structuring |
utilities |
| colors.scss | 👉 Three color scheme with various shades 👉 State colors including $success, $warning, $danger, and $info (with 3 shades each) 👉 Straight color classes of all, allowing you to change colors and background colors in the HTML template 👉 Note: includes $form-input-field-bg for forms.scss file |
colors |
| forms.scss | 👉 Enables form-group elements to contain stacked groups of labels and inputs or controls 👉 Adjusts select element to match rest of styling and dynamically change with rem calculations |
forms |
| buttons.scss | 👉 Configurable vars ($base-border-radius, $base-font-size, and $rounded-border-radius 👉 pseudo selectors that enable hover effects of brightening or darkening (for flexibility) 👉 Bootstrap-like classes for creating buttons quickly with configuration via chained classes |
buttons |
In the template ⤵️
Change colors ⤵️
Use classes in your template ⤵️
In the template ⤵️
Configurable in the buttons.scss file ⤵️
Usage in the html template ⤵️
Remember... it's just a bunch of SCSS files. You always have the option of going into the node_modules/@riapacheco file to make all the changes you need!